<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main" />
    <g:set var="entityName" value="${message(code: 'house.label', default: 'House')}" />
    <title>房屋详情</title>
    %{--swiper.css--}%
    <asset:stylesheet src="intelligence/swiper.css"/>
    <style type="text/css">
    /*分页器*/

    .step:hover{
        background: #2196F3;
        color: #fff;
        border-color:#2196F3;
    }
    /*表格*/
    .table th,.table td{
        font-size: 14px;
    }
    .table tr:hover,.table td:hover{
        background:rgba(247,251,255,1);
    }
    </style>
</head>
<body>

<div class="main2">
    <div class="width" style="margin: 0 auto;">
        <div class="houseingContent">
            %{--<div class="pull-left houseingContentPage_1" title="${house?.apartmentnumber}">${house?.apartmentnumber}</div>--}%
            <div class="houseingContentPage_2" title="${house?.detailaddress}"><asset:image src="detailImage_1.png" class="detailPageImage"/>${house?.apartmentnumber}</div>
        </div>
        <div class="mainBody">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <g:if test="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.house?.id))}">
                        <g:each in="${com.cindata.base.Picture.findAllByAddress(com.cindata.base.Address.findById(this.house?.id))}">
                            <div class='swiper-slide'><image src='${it?.url}' class='swiperImg'/></div>
                        </g:each>
                    </g:if>
                    <g:else>
                        <image src='/assets/january.jpg' class='swiperImg' />
                    </g:else>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>

            </div>

            <!-- 房屋详情信息 -->
            <div class="houseDetailInformation">
                <div class="detailBox_1 pull-left">

                    <div>门牌号：<span class="DetailColor">${house?.apartmentnumber?:"--"}</span></div>
                    <div>产权性质：<span class="DetailColor">${this.house?.houseProperty?:"--"}</span></div>
                    <div>使用面积：<span class="DetailColor">${this.house?.livingsquare?:"--"}㎡</span></div>
                    <div>户型：<span class="DetailColor">${this.house?.floorplantype?:"--"}</span></div>
                    <div>所在层：<span class="DetailColor">${house?.currentfloor?:"--"}</span></div>


                </div>

                <div class="detailBox_3 pull-left">

                  <div>房屋编码：<span class="DetailColor" id="houseSerialNumber">${this.house?.houseSerialNumber?:"--"}</span><a class="text-info" data-toggle="modal" data-target="#changeHouseSerialNumber">编辑</a></div>
                  <div>建筑面积：<span class="DetailColor">${this.house?.buildingarea?:"--"}㎡</span></div>
                  <div>朝向：<span class="DetailColor">${this.house?.aspect?:"--"}</span></div>
                  <div>装修情况：<span class="DetailColor">${this.house?.decoratelevel?:"--"}</span></div>


                </div>

            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="changeHouseSerialNumber" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
          <g:form class="form-horizontal changeHouseSerialNumberForm" controller="house" action="changeHouseSerialNumber">

              <div class="color-line"></div>

              <div class="modal-header">
              </div>

              <div class="modal-body">
                <div class="form-group">
                    <label class="col-md-3 control-label text-left">系统中房产证号</label>
                    <input class="form-control" type="hidden" name="houseId" value="${this.house?.id?:"--"}"/>
                </div>
                  <div class="form-group">
                      <label class="col-md-3 control-label text-left">房屋编码：</label>
                      <div class="col-md-5">
                        <label class="control-label">${this.house?.houseSerialNumber?:"--"}</label>
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-md-3 control-label text-left">纳税人房产证号</label>
                  </div>
                  <div class="form-group">
                      <div class="col-md-12">
                        <input type="text" value="" name="houseSerialNumber" class="form-control" placeholder="房屋编码">
                      </div>
                  </div>

              </div>

              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                  <button type="submit" class="btn btn-primary">保存</button>
              </div>
          </g:form>
        </div>
    </div>
</div>

<div class="clearfix"></div>
<!-- 房屋成交记录 -->
<div class="houseDealData_1">
    <div class="houseDealContent">
        <ul class="plateData">
            <li class="everyTitle" id="houseDealRecord">房屋成交记录</li>
        </ul>
    </div>
    <table class="table table-hover mb-0">
        <thead class="tableFontColor">
        <tr>
            <th>交易日期</th>
            <th>交易单价(元/ ㎡)</th>
            <th>交易总价(万元)</th>
        </tr>
        </thead>
        <tbody>
        <g:if test="${saleHouseCount==0}">
            <tr><td colspan="6">暂无交易记录</td></tr>
        </g:if>
        <g:else>
            <g:each in="${saleHouseList}">
                <tr>

                    <td scope="row"><g:formatDate date="${it[4]}" format="yyyy-MM-dd"></g:formatDate></td>
                    <th>${it[2]}元/m2</th>
                    <th>${it[3]}元</th>
                </tr>
            </g:each>
        </g:else>

        </tbody>
    </table>
    <!-- grails分页器 -->
    <div class="btn-group flex pagings">
        <g:paginate total="${saleHouseCount?: 0}" params="${params}"/>
    </div>
</div>

<!-- 小区简介 -->
<div class="houseDealData_1">
    <div class="houseDealContent">
        <ul class="plateData">
            <li class="everyTitle">小区简介</li>
            <li class="pull-right"><a href="/community/show?id=${communityList.id}" id="watchHouseDetail">查看小区详情&gt;&gt;</a></li>
        </ul>
    </div>

    <div class="houseBox">
        <div id="commPic">
            <g:if test="${com.cindata.base.Picture.findByAddress(com.cindata.base.Address.findById(this.communityList.address.id))?.url}">
                <image width='1100' height='400' src='${com.cindata.base.Picture.findByAddress(com.cindata.base.Address.findById(this.communityList.address.id))?.url}'/>
            </g:if>
            <g:else>
                <image src='/assets/january.jpg' width='1140' height='400'/>
            </g:else>
        </div>
        <div class="houseSection">
            <div class="house_address">${communityList.communityname?:"--"}</div>
            <p class="pull-left house_avarage">均价 <span class="house_price">${communityList.currentapplicationprice?:"--"}/m²</span></p>
            <p class="pull-right buildYear">建筑年代：${communityList.buildyear?:"--"}年</p>
            <div class="houseInnerSection"></div>
            <div class="house_details">
                <div>
                    <p class="house_detailsFont"><asset:image src="houseImage_1.png" class="HosePageImage_1"/>建筑类型：${communityList.buildingtype?:"--"}</p>
                </div>
                <div>
                    <p class="house_detailsFont"><asset:image src="houseImage_3.png" class="HosePageImage_1"/>楼栋总数：${communityList.totalbuildingcount?:"--"}栋</p>
                </div>
                <div>
                    <p class="house_detailsFont"><asset:image src="houseImage_2.png" class="HosePageImage_1"/>房屋总户数：${communityList.totalhouseholdcount?:"--"}户</p>
                </div>

            </div>
        </div>
    </div>
</div>

%{--footer--}%
<footer class="footerText">
    <section class="serverPhone">客服电话：400-077-0101</section>
    <section class="companyName">2017 © 北京国信达数据技术有限公司</section>
</footer>

<asset:javascript src="intelligence/swiper.js"/>
<script type="text/javascript">

    var swiper = new Swiper('.swiper-container',{
        loop:true,
        autoplay:1000,
        slidesPerView: 1,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });

    // 分页器样式
    $(".pagings>a,.pagings>span").addClass("btn btn-secondary waves-effect");
    // 当前分页
    $(".currentStep").css({"background":"#2196F3","color":"#fff","border-color":"#2196F3"});
</script>
</body>
</html>
